


export function createElement(type) {
    return document.createElement(type);
}

export function setInitialProperties(domElement, type, props) {
    for (const propKey in props) {
        const nextProp = props[propKey];
        if (propKey === 'children') {
            if (typeof nextProp === 'string' || typeof nextProp === 'number') {
                domElement.textContent = nextProp;
            }
        } else if (propKey === 'style') {
            for (let stylePropKey in nextProp) {
                domElement.style[stylePropKey] = nextProp[stylePropKey]
            }
        } else {
            domElement[propKey] = nextProp;
        }
    }
}

/**
 * 比较新老属性的差异
 * @param {*} domElement 复用的dom元素
 * @param {*} type 类型
 * @param {*} lastProps 老属性
 * @param {*} nextProps 新属性
 * @returns 更新的属性 [更新的key1,更新的值1,更新的key2,更新的值2]
 */
export function diffProperties(domElement, tag, lastProps, nextProps) {
    let updatePayload = null;
    let propKey;
    for (propKey in lastProps) {
        if (lastProps.hasOwnProperty(propKey) && (!nextProps.hasOwnProperty(propKey))) {
            //updatePayload更新数组 [更新的key1,更新的值1,更新的key2,更新的值2]
            (updatePayload = updatePayload || []).push(propKey, null);
        }
    }
    for (propKey in nextProps) {
        const nextProp = nextProps[propKey];
        if (propKey == 'children') {
            if (typeof nextProp === 'string' || typeof nextProp === 'number') {
                if (nextProp !== lastProps[propKey]) {
                    (updatePayload = updatePayload || []).push(propKey, nextProp);
                }
            }
        } else {
            //如果新的属性和老的属性不一样
            if (nextProp !== lastProps[propKey]) {
                (updatePayload = updatePayload || []).push(propKey, nextProp);
            }
        }
    }
    return updatePayload;

}

export function updateProperties(domElement, updatePayload) {
    for (let i = 0; i < updatePayload.length; i += 2) {
        const propKey = updatePayload[i];
        const propValue = updatePayload[i + 1];
        if (propKey === 'children') {
            domElement.textContent = propValue;
        } else {
            domElement.setAttribute(propKey, propValue);// id
        }
    }
}